<template>
  <div class="box1">
    <div class="box2">
      <slot />
    </div>
  </div>
</template>

<script>

export default {
  name: "newCorner",
  props: {
    type: {
      default: 1
    },
  },
  components: {

  },
  data() {
    return {
    }
  },
  computed: {

  },
  watch: {},
  methods: {
    
  },
  created() {
  },
  mounted() {
    
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
  .box1 {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(29, 252, 255, 0.15);
    border: 1px solid rgba(29, 252, 255, 0.3);

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 10px;
      height: 10px;
      border-left: 2px solid rgb(29, 252, 255);
      border-top: 2px solid rgb(29, 252, 255);
      content: '';
    }

    &::after {
      position: absolute;
      top: 0;
      right: 0;
      width: 10px;
      height: 10px;
      border-top: 2px solid rgb(29, 252, 255);
      border-right: 2px solid rgb(29, 252, 255);
      content: '';
    }

    .box2 {
      position: relative;
      width: 100%;
      height: 100%;
      
      &::before {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 10px;
        height: 10px;
        border-bottom: 2px solid rgb(29, 252, 255);
        border-left: 2px solid rgb(29, 252, 255);
        content: '';
      }

      &::after {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-bottom: 2px solid rgb(29, 252, 255);
        border-right: 2px solid rgb(29, 252, 255);
        content: '';
      }
    }
  }
</style>